<template>
	<view class="content">
		<uni-collapse accordion="true" @change="switchPanel">
			<uni-collapse-item title="新增配置+" name="add">
				<view class="uni-padding-wrap uni-common-mt">
					<view class="uni-flex uni-row">
						<view class="uni-form-item">
							<view class="title">配置名称</view>
							<input class="uni-input" v-model="jenkins_name" />
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="uni-form-item">
							<view class="title">jenkins地址</view>
							<input class="uni-input" v-model="jenkins_url" placeholder="eg:https://jenkins.xxxx.com" />
						</view>
					</view>

					<view class="uni-flex uni-row">
						<view class="uni-form-item">
							<view class="title">jenkins账户</view>
							<input class="uni-input" v-model="jenkins_username" />
						</view>
					</view>

					<view class="uni-flex uni-row">
						<view class="uni-form-item">
							<view class="title">API Token</view>
							<input class="uni-input" v-model="jenkins_api_token" />
						</view>
					</view>

					<view class="uni-card">
						<button type="primary" @click="addConfig(false)">添加</button>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="全部服务器" name="show">
				<view style="padding: 30rpx;">
					<uni-list>
						<template v-for="(item, key) in config_list">
							<uni-list-item clickable @click="itemClick(key)" :showArrow="false" :rightWord="item.jenkins_username" :title="item.jenkins_name"
							 :note="item.jenkins_url"></uni-list-item>
						</template>
					</uni-list>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!-- 修改弹窗 -->
		<popup-layer ref="popupRef" :direction="'top'" v-model="show_edit_popup" style="z-index: 998;">
			<view class="uni-padding-wrap uni-common-mt">
				<view class="uni-flex uni-row">
					<view class="uni-form-item">
						<view class="title">配置名称</view>
						<input class="uni-input" v-model="select_config.jenkins_name" />
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="uni-form-item">
						<view class="title">jenkins地址</view>
						<input class="uni-input" v-model="select_config.jenkins_url" placeholder="eg:https://jenkins.xxxx.com" />
					</view>
				</view>

				<view class="uni-flex uni-row">
					<view class="uni-form-item">
						<view class="title">jenkins账户</view>
						<input class="uni-input" v-model="select_config.jenkins_username" />
					</view>
				</view>

				<view class="uni-flex uni-row">
					<view class="uni-form-item">
						<view class="title">API Token</view>
						<input class="uni-input" v-model="select_config.jenkins_api_token" placeholder="API Token 和 jenkins密码选填一种" />
					</view>
				</view>

				<view class="uni-card" style="padding: 50rpx;">
					<button type="primary" @click="editConfig" style="margin-bottom: 30rpx;">修改</button>
					<button type="warn" @click="deleteConfig">删除</button>
				</view>
			</view>
		</popup-layer>

	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniListItem from '@/components/qiming-list-item/qiming-list-item.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import popupLayer from '@/components/popup-layer/popup-layer.vue';

	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniListItem,
			uniList,
			popupLayer
		},
		data() {
			return {
				token: "",
				jenkins_name: "我的发布",
				jenkins_url: "",
				jenkins_username: "",
				jenkins_password: "",
				jenkins_api_token: "",
				config_list: [],
				select_config: {},
				select_index:0,
				show_edit_popup: false
			}
		},
		onShow() {
			var _this = this
			var token_obj = this.common.checkNeedLogin()
			if (token_obj != null) {
				this.token = token_obj.token
			}
		},
		methods: {
			itemClick(index) {
				this.select_config = this.config_list[index]
				this.select_index = index
				this.$refs.popupRef.show()
			},
			switchPanel(event) {
				if (event == 'show') {
					this.queryConfigList()
				}
			},
			editConfig() {
				this.addConfig(true)
			},
			deleteConfig() {
				if (this.select_config.jenkins_config_id == undefined) {
					uni.showToast({
						icon: "none",
						title: '先选择要删除的配置'
					})
					return false
				}
				this.$refs.popupRef.close();
				var _this = this
				uni.showModal({
					title: '提示',
					content: '确认删除' + this.select_config.jenkins_name + '吗',
					success: function(res) {
						if (res.confirm) {
							_this.common.requestAPI(_this.common.config.API_DELETE_CONFIG, 'GET', {
								token: _this.token,
								jenkins_config_id: _this.select_config.jenkins_config_id
							}, '正在删除', function(res) {
								if (res.status == 'OK') {
									uni.showToast({
										title: '删除成功'
									})
									_this.config_list.splice(_this.select_index, 1)
									_this.select_index = 0
								}
							})
						}
					}
				});
			},
			queryConfigList() {
				var _this = this
				this.common.requestAPI(this.common.config.API_GET_CONFIG_LIST, 'GET', {
					token: this.token
				}, '正在查询', function(res) {
					if (res.status == 'OK') {
						_this.config_list = res.result
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			checkAddConfig(jenkins_name, jenkins_url, jenkins_username, jenkins_password, jenkins_api_token) {
				if (jenkins_name.length < 1 || jenkins_url.length < 10 || jenkins_username.length < 1) {
					uni.showToast({
						icon: "none",
						title: '数据补充完整再提交'
					})
					return false
				}
				if (jenkins_api_token.length < 5) {
					uni.showToast({
						icon: "none",
						title: 'API Token不能为空'
					})
					return false
				}
			},
			addConfig(is_edit = false) {
				if (is_edit) {
					this.checkAddConfig(this.select_config.jenkins_name, this.select_config.jenkins_url, this.select_config.jenkins_username,
						this.select_config.jenkins_password, this.select_config.jenkins_api_token)
					var add_data = {
						token: this.token,
						jenkins_name: this.select_config.jenkins_name,
						jenkins_url: this.select_config.jenkins_url,
						jenkins_username: this.select_config.jenkins_username,
						jenkins_password: this.select_config.jenkins_password,
						jenkins_api_token: this.select_config.jenkins_api_token
					}
				} else {
					this.checkAddConfig(this.jenkins_name, this.jenkins_url, this.jenkins_username, this.jenkins_password, this.jenkins_api_token)
					var add_data = {
						token: this.token,
						jenkins_name: this.jenkins_name,
						jenkins_url: this.jenkins_url,
						jenkins_username: this.jenkins_username,
						jenkins_password: this.jenkins_password,
						jenkins_api_token: this.jenkins_api_token
					}
				}
				var _this = this
				var add_url = this.common.config.API_ADD_CONFIG
				if (is_edit) {
					if (this.select_config.jenkins_config_id == undefined) {
						uni.showToast({
							icon: "none",
							title: '先选择要编辑的配置'
						})
						return false
					}
					add_data.jenkins_config_id = this.select_config.jenkins_config_id
					add_url = this.common.config.API_EDIT_CONFIG
				}
				console.log(add_data)
				this.common.requestAPI(add_url, 'POST', add_data, '正在保存', function(res) {
					if (res.status == 'OK') {
						uni.showToast({
							title: '保存成功'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.uni-form-item .title {
		width: 130rpx;
		text-align: right;	
	}
</style>
